<template>
  <div class="persondata">
    <div class="line">
      <span>|</span>
      <span>{{ cropName }}</span>
    </div>
    <div class="header">
      <div class="left">
        <span>班级：测试一班11</span>
        <span>年级：2019级</span>
      </div>
      <div class="right">
        <el-button type="primary" size="small" icon="el-icon-arrow-left" @click="goback">返回</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="77"
        />
        <el-table-column
          label="序号"
          width="110"
        >
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column
          label="姓名"
          width="110"
        >
          <template>{{ studentName }}</template>
        </el-table-column>
        <el-table-column
          prop="cropProperty"
          label="属性"
          width="110"
        />
        <el-table-column
          prop="detectionTime"
          label="检测时间"
          width="110"
        />
        <el-table-column
          prop="growthPeriod"
          label="生育期"
          width="110"
        />
        <el-table-column
          prop="process"
          label="处理"
          width="110"
        />
        <el-table-column v-for="(item,index) in extraParam" :key="index" :label="item" width="180">
          <template slot-scope="scope">
            <div>{{ tableData[scope.$index].extraParam[`${item}`] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="数据" width="110">
          <template slot-scope="scope">
            <div>{{ tableData[scope.$index].data.join('|') }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="average"
          label="平均值"
          width="110"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              style="color:red"
              @click="handleDelete(scope.$index, scope.row)"
            ><i class="el-icon-delete" /></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getDataReport, updateDataReport } from '@/api/dataReport'
export default {
  name: 'Persondata',
  data() {
    return {
      role: '',
      studentName: '',
      dataReportId: '',
      id: '',
      cropId: '',
      cropName: '',
      studentId: '',
      extraParam: [],
      input: '',
      value1: '',
      Param: [],
      tableData: [],
      multipleSelection: [],
      listLoading: true
    }
  },
  created() {
    this.role = this.$store.getters.roles;
    this.cropName = this.$store.getters.cropName
    const { dataReportId, studentName } = this.$route.params
    this.dataReportId = dataReportId
    this.studentName = studentName
    console.log(this.studentName)
    const data = {
      dataReportId: this.dataReportId
    }
    this.getDataReport(data)
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleDelete(index) { // 删除详细数据中的一条
      this.$confirm('是否确定删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        this.tableData.splice(index, 1)
        const data = {
          cropDatas: this.tableData,
          cropId: this.cropId,
          studentId: this.studentId,
          id: this.id,
          dataReportId: this.dataReportId
        }
        updateDataReport(data).then(res => {
          console.log(res)
          this.listLoading = false
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getDataReport(data) {
      getDataReport(data).then(res => {
        this.id = res.data.id
        this.cropId = res.data.cropId
        this.studentId = res.data.studentId
        this.tableData = res.data.cropDatas
        this.listLoading = false
        if (res.data.cropDatas.length > 0) {
          for (const key in this.tableData[0].extraParam) {
            this.extraParam.push(key)
          }
        }
      })
    }
  }
}
</script>
<style scoped>
    .line{
        width: 100%;
        color: #345E8F;
        font-size: 16px;
        margin-bottom: 1%;
    }
    .line span:first-child{
        font-weight: bold;
        margin-right: 1%;
        font-size: 18px;
    }
    .header{
        display: flex;
        justify-content: space-between;
        margin-bottom: 1%;
    }
    .left{
        width: 100%;
        color: #345E8F;
        font-size: 14px;
        display: flex;
        justify-content: flex-start;
    }
    .left span:first-child{
        margin-right: 1%;
    }
</style>
